<template>
  <div class="main_div" style="width: 100%; height: 100%;">
    <!-- 表格 -->
    <table>
      <!-- 表头 -->
      <tr>
        <th v-for="t in param.title">{{t.title}}</th>
        <th v-if="param.btns.enable">操作</th>
      </tr>
      <!-- 数据列表 -->
      <tr v-for="d in list">
        <!--
         d.id => 结果

         var key="id"
         d[key] => d.id => 结果
         -->
        <td v-for="t in param.title">
          <span v-if="t.other">
            {{t.other(d[t.attr])}}
          </span>
          <span v-else>
              <span v-if="t.type == 'img'">
                <!-- 展示图片 -->
                <img style="width: 120px; height: 90px; border-radius: 10px; box-shadow: 5px 5px 5px gray;"
                    :src="'http://localhost/file/img/download?imgName=' + d[t.attr]"/>
              </span>
              <span v-else>
                <!-- 展示默认的内容 -->
                {{d[t.attr]}}
              </span>
          </span>
        </td>
        <!-- 操作的这一列 -->
        <td style="width: 200px;" v-if="param.btns.enable">
          <!-- 生成一个操作按钮 -->
          <button v-for="action in param.btns.actions"
             v-if="action.isShow ? action.isShow(d) : true"
             @click="action.callable(d)">{{action.btnName}}</button>
        </td>
      </tr>
    </table>

    <!-- 分页导航 -->
    <div class="page_div" v-if="param.page.enable">
      <button v-if="page.pageNum > 1" @click="fanye(1)">首页</button>
      <button v-if="page.pageNum > 1" @click="fanye(page.pageNum - 1)">上一页</button>
      <button v-if="page.pageNum == 1" disabled="disabled">首页</button>
      <button v-if="page.pageNum == 1" disabled="disabled">上一页</button>

      <button v-if="page.pageNum < page.pageCount" @click="fanye(page.pageNum + 1)">下一页</button>
      <button v-if="page.pageNum < page.pageCount" @click="fanye(page.pageCount)">尾页</button>
      <button v-if="page.pageNum == page.pageCount" disabled="disabled">下一页</button>
      <button v-if="page.pageNum == page.pageCount" disabled="disabled">尾页</button>

      <a>当前第{{page.pageNum}}页/共{{page.pageCount}}页</a>
    </div>
  </div>
</template>

<script>
  export default{
    props: {
      param: {
        type: Object
      }
    },
    data(){
      return {
        //表格列表数据
        list: [],
        //分页参数
        page: {
          pageNum: this.param.page.pageNum,
          pageSize: this.param.page.pageSize,
          pageCount: 1
        }
      }
    },
    methods:{
      //请求列表数据的方法
      request(){
        //预处理参数
        var p = this.param.data ? this.param.data : {};
        //设置分页参数
        if(this.param.page.enable){
          p.pageNum = this.page.pageNum;
          p.pageSize = this.page.pageSize;
        }

        this.$.ajax({
          type: "POST",
          url: this.param.url,
          data: p,
          success: (list, page) => {
            this.list = list;
            //设置总页码
            this.page.pageCount = page.total;
            this.page.pageNum = page.pageNum;
          }
        });
      },
      //翻页
      fanye(num){
        //重新设置页码
        this.page.pageNum = num;
        //重新发送请求
        this.request();
      }
    },
    mounted() {
      //组件加载时触发
      this.request();
    }
  }
</script>

<style scoped>
.main_div{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

table {
  width: 100%;
  background-color: gainsboro;
}

table th {
  background-color: #008B8B;
  padding: 10px;
  color: white;
  font-family: 楷体;
}

table td {
  text-align: center;
  padding: 15px;
  height: 40px;
}

table tr:nth-child(even) {
  background-color: white;
}

table tr:nth-child(odd) {
  background-color: whitesmoke;
}

table td button {
  padding: 5px 10px;
  margin-left: 10px;
  background-color: #008B8B;
  color: white;
  border-radius: 20px;
  box-shadow: 5px 5px 10px gray;
}

.page_div {
  width: 40%;
  margin: 0px auto;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.page_div button {
  padding: 5px 20px;
  background-color: pink;
  box-shadow: 5px 5px 5px gray;
}

</style>
